// 侧边栏
// 1.侧边栏显示/隐藏

var pos = 0; //定义全局变量
aisdeShowHide();
//  2.滑动到指定区域修改侧边栏aside中li标签的样式
asideSlide();

$(window).scroll(function () {
  //当改变滚动条位置
  //改变滚动条位置时触发scroll事件
  // 通过回调函数处理滚动后的结果
  // 在控制台输出滚动条的位置值
  // 其中console是控制台，log以日志方式显示结果
  // math表示数学类，floor：向下取整
  // scrolltop()：滚动条的位置
  //console.log(Math.floor($(window).scrollTop()))
  var pos = 0; //定义全局变量
  aisdeShowHide();
  //  2.滑动到指定区域修改侧边栏aside中li标签的样式
  asideSlide();
});
// 3.快速回到顶部
$(".to-top").click(function () {
  // $(window).scrollTop(0);
  slideToArea(0, 1000);
});
// 4.快速定位到指定区域
$("aside li").click(function () {
  //单击获得当前li标签的文本内容
  console.log($(this).text());
  let txt = $(this).text();
  if (txt == "手机") {
    slideToArea(600, 500);
  } else if (txt == "笔记本") {
    slideToArea(1097, 500);
  } else if (txt == "平板") {
    slideToArea(1426, 500);
  } else if (txt == "智能穿戴") {
    slideToArea(1625, 500);
  } else if (txt == "智能家具") {
    slideToArea(2026, 500);
  } else if (txt == "电视") {
    slideToArea(2426, 500);
  }
});
//侧边栏显示和隐藏
function aisdeShowHide() {
  pos = Math.floor($(this).scrollTop()); //定义变量初始化
  // console.log(pos);
  if (pos >= 800) {
    // $('aside').css('display','block')
    // $('aside').show('slow');
    // $('aisde').slideDown(1000) //下滑  slideUp：上滑
    $("aside").fadeIn(1000);
  } else {
    $("aside").fadeOut(1000);
  }
}
//为当前li标签添加和删除active类
function addCls(idx) {
  //移除所有li标签上class为active的类
  $("aside li").removeClass("active");
  //为第一个li标签添加active类
  $("aside li").eq(idx).addClass("active");
}
function asideSlide() {
  if (pos >= 600 && pos < 1097) {
    addCls(0);
  } else if (pos >= 1097 && pos < 1426) {
    addCls(1);
  } else if (pos >= 1426 && pos < 1625) {
    addCls(2);
  } else if (pos >= 1625 && pos < 2026) {
    addCls(3);
  } else if (pos >= 2026 && pos < 2426) {
    addCls(4);
  } else {
    addCls(5);
  }
}

//
function slideToArea(ps, time) {
  $(window.opera ? "html" : "html ,body").animate(
    {
      scrollTop: ps,
    },
    time
  );
}

// 当后端还没能提供数据接口时，前端工程师需要根据UI图进行数据模拟，这个过程叫Mock。
// 获取Mock数据
$.ajax({
  type: "get", // 请求方法
  url: "./mock/data.json",
}).then(
  (res) => {
    // 请求成功
    let data = res.results;
    // console.log(data);
    // 3.将data数据绑定到id为banner的模板上
    const tpl = template("banner", data);
    // 4.将模板渲染到网页中
    $(".swiper-wrapper").append(tpl);

    // 轮播图
    var mySwiper = new Swiper(".swiper", {
      loop: true, // 循环模式选项
      autoplay: true,
      effect: "fade",
      // 分页器
      pagination: {
        el: ".swiper-pagination",
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

    // 精品推荐
    let bsGoods = data.goods['精品推荐']
    bsGoods = {
      bsGoods
    }
    // console.log(bsGoods);
    let bstpl = template('bs', bsGoods);
    $('.goods-list').append(bstpl);
  },
  (err) => {
    // 请求失败
    throw err;
  }
);
